<template>
    <view class="passenger">
        <!-- 导航组件 -->
        <UserNav title="乘客列表" />
        <view class="abc">
            <view class="passengerList">
                <!-- 新增按钮 -->
                <button @click="goaddpage" class="addBtn">
                    <image src="../../static/添加.png" class="add" />
                    <text>新增乘客</text>
                </button>
                <!-- 乘客列表 -->
                <view class="passengerInfo">
                    <view class="drop-down">下拉可刷新乘客列表 </view>
                    <view class="list">
                        <view
                            class="list-item"
                            v-for="(item, index) in passengerData"
                            :key="index"
                        >
                            <image
                                class="list-item-add"
                                src="../../static/Add.png"
                            />

                            <view class="list-item-user">
                                <view class="username">
                                    {{ item.name }}
                                    <image
                                        class="list-item-user-adult"
                                        src="../../static/成人票.png"
                                    />
                                </view>
                                <view class="ID">身份证 {{ item.ID }}</view>
                            </view>

                            <image
                                v-if="!item.default"
                                class="list-item-checkbox"
                                src="../../static/False.png"
                                @click="handleSelected(index)"
                            />
                            <image
                                v-else
                                class="list-item-checkbox"
                                src="../../static/True.png"
                                @click="handleSelected(index)"
                            />
                        </view>
                    </view>
                </view>
                <view class="provide">本次购票服务由八维票务提供</view>
                <button class="determine">
                    <text>确 定</text>
                </button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            passengerData: [
                {
                    name: "王一默",
                    ID: "187789377645981132",
                    default: true,
                },
                {
                    name: "李一一",
                    ID: "187789377645981132",
                    default: false,
                },
                {
                    name: "王一默",
                    ID: "187789377645981132",
                    default: true,
                },
                {
                    name: "李一一",
                    ID: "187789377645981132",
                    default: false,
                },
                {
                    name: "王一默",
                    ID: "187789377645981132",
                    default: true,
                },
                {
                    name: "李一一",
                    ID: "187789377645981132",
                    default: false,
                },
                {
                    name: "王一默",
                    ID: "187789377645981132",
                    default: true,
                },
                {
                    name: "李一一",
                    ID: "187789377645981132",
                    default: false,
                },
                {
                    name: "王一默",
                    ID: "187789377645981132",
                    default: true,
                },
                {
                    name: "李一一",
                    ID: "187789377645981132",
                    default: false,
                },
            ],
        };
    },
    methods: {
		goaddpage(){
			uni.navigateTo({
				url:'/pages/addpage/addpage'
			})
		},
        handleSelected(index) {
            this.passengerData[index].default =
                !this.passengerData[index].default;
        },
    },
};
</script>
<style lang="scss" scoped>
.passenger {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .abc {
        overflow: hidden;
        overflow-y: auto;
        flex: 1;
        .passengerList {
            // flex: 1;
            height: 100%;
            // background-color: rgba(178, 183, 198, 0.15);
            padding: 0px 20rpx;
            z-index: 1;
            button.addBtn {
                color: #1ba9ba;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 5rpx 0;
                margin-top: 15rpx;
                font-size: 35rpx;
                background-color: white;
                .add {
                    width: 50rpx;
                    height: 50rpx;
                }
                text {
                    margin-left: 10rpx;
                }
            }
            .passengerInfo {
                border-radius: 10rpx;
                background-color: white;
                margin-top: 15rpx;
                padding: 0 50rpx;
                .drop-down {
                    width: 100%;
                    line-height: 110rpx;
                    text-align: center;
                    border-bottom: 1px solid rgba(178, 183, 198, 0.5);
                    color: rgba(0, 0, 0, 0.6);
                }
                .list {
                    .list-item {
                        height: 150rpx;
                        display: flex;
                        align-items: center;
                        padding: 100rpx 0px;
                        border-bottom: 1px solid rgba(178, 183, 198, 0.5);
                        .list-item-add {
                            width: 50rpx;
                            height: 50rpx;
                        }
                        .list-item-user {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            height: 100%;
                            padding: 0 30rpx;
                            .username {
                                font-size: 37rpx;
                                font-weight: 600;
                                display: flex;
                                align-items: center;
                            }
                            .list-item-user-adult {
                                width: 100rpx;
                                height: 50rpx;
                                margin-left: 10rpx;
                            }
                            .ID {
                                margin-top: 10rpx;
                                color: rgba(0, 0, 0, 0.6);
                            }
                        }
                        .list-item-checkbox {
                            width: 50rpx;
                            height: 50rpx;
                        }
                    }
                }
            }
            .provide {
                width: 100%;
                text-align: center;
                height: 120rpx;
                line-height: 120rpx;
                color: rgba(0, 0, 0, 0.6);
            }
            .determine {
                width: calc(100% - 40rpx);
                position: fixed;
                bottom: 40rpx;
                left: 0;
                margin: 0 20rpx;
                border-radius: 60rpx;
                background-color: #1ba9ba;
                text {
                    color: white;
                }
            }
        }
    }
}
</style>
